<script>
import { mapMutations, mapState } from 'vuex';

export default {
  name: 'AppHeader',
  methods: {
    ...mapMutations(['toggleAuthModal']),
    signOut() {
      this.$store.dispatch('signOut');
      if (this.$route.meta.requiresAuth) {
        this.$router.push({
          name: 'home',
        });
      }
    },
  },
  computed: {
    ...mapState({
      userLoggedIn: (state) => state.auth.userLoggedIn,
    }),
  },
};
</script>

<template>
  <header id="header" class="bg-gray-700">
    <nav class="container mx-auto flex justify-start items-center py-5 px-4">
      <!-- App Name -->
      <router-link class="flex items-center text-white font-bold uppercase text-2xl mr-4"
                   :to="{ name: 'home' }"
        exact-active-class="no-active">
        <svg class="mr-2 bg-green-500 rounded-lg p-1"
            width="38" height="38" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
          <path d="M24 3.99976V43.9998" stroke="#333" stroke-width="4" stroke-linecap="square"/>
          <path d="M34 11.9998V35.9998" stroke="#333" stroke-width="4" stroke-linecap="square"/>
          <path d="M4 17.9998V29.9998" stroke="#333" stroke-width="4" stroke-linecap="square"/>
          <path d="M44 17.9998V29.9998" stroke="#333" stroke-width="4" stroke-linecap="square"/>
        <path d="M14 11.9998V35.9998" stroke="#333" stroke-width="4" stroke-linecap="square"/></svg>
        爱音乐播放器
      </router-link>

      <div class="flex flex-grow items-center">
        <!-- Primary Navigation -->
        <ul class="flex flex-row mt-1">
          <!-- Navigation Links -->
          <li>
            <router-link class="px-2 text-white" :to="{ name: 'about' }">
              关于
            </router-link>
          </li>
          <li v-if="!userLoggedIn">
            <a class="px-2 text-white" href="#" @click.prevent="toggleAuthModal">
              登录/注册
            </a>
          </li>
          <template v-else>
            <li>
              <router-link class="px-2 text-white" :to="{ name: 'manage' }">
                管理
              </router-link>
            </li>
            <li>
              <a class="px-2 text-white" href="#" @click.prevent="signOut">退出</a>
            </li>
          </template>
        </ul>
      </div>
    </nav>
  </header>
</template>
